import React, {useState} from 'react'
import {Link,Outlet} from 'react-router-dom'

export default function Message() {
  const [messages] = useState([
    {id:'001',title:'消息1',content:'message1'},
    {id:'002',title:'消息2',content:'message2'},
    {id:'003',title:'消息3',content:'message3'}
  ])
  return (
    <div>
      <ul>
        {
          messages.map(m=>{
            return (
              <li key={m.id}>
                <Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>
              </li>
            )
          })
        }
      </ul>
      <hr/>
      <Outlet/>
    </div>
  )
}
